<template>
  <div class="profile-view">
  </div>
  <div class="edit-profile">
    <div class="inner">
      <div class="left">
        <el-menu
          :default-active="menuActive"
          router
        >
          <el-menu-item index="1" route="/profileInfo">
            <el-icon><icon-menu /></el-icon>
            <span>编辑个人信息</span>
          </el-menu-item>
          <el-menu-item index="2" route="/profilePass">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
          </el-menu-item>
          <el-menu-item index="3" route="/profileDelete">
            <el-icon><MoonNight /></el-icon>
            <span>注销账号</span>
          </el-menu-item>
        </el-menu>
        </div>
      <div class="right">
        <RouterView/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Menu as IconMenu, Lock, MoonNight } from '@element-plus/icons-vue'
import { ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';

// 菜单活动index
const menuActive = ref('1')
// 监听路由变化改变菜单活动index
const route = useRoute()
watchEffect(() => {
  switch (route.path) {
    case '/profileInfo':
      menuActive.value = '1'
      break;

    case '/profilePass':
      menuActive.value = '2'
      break;

    case '/profileDelete':
      menuActive.value = '3'
      break;
      
    default:
      console.log('ERROR');
      break;
  }
})
</script>

<style scoped>
.profile-view {
  height: 40vh;
  width: 100%;
  background: url(https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png) no-repeat fixed;
  background-size: cover;
}
.edit-profile {
  height: 100%;
  width: 100%;
  background-color: #F2F3F5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.edit-profile .inner {
  height: 100%;
  width: 70%;
  margin-top: -2.5rem;
  background-color: transparent;
}
.inner > div {
  float: left;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: var(--el-box-shadow-light);
}
.left {
  height: 20rem;
  width: calc(20% - 1.5rem);
  margin-right: 1.5rem;
  padding-top: 1rem;
}
.right {
  height: 100%;
  width: 80%;
  padding: 2rem;
  display: flex;
  flex-direction: row;
}
</style>